<template>
	<view>
		<view class="navHead clientRect">
			<view class='navbar' :style="{paddingTop:navH+'rpx'}">
				<view class='navbarH'>
					<view class='navbarCon acea-row row-center-wrapper'>
						<view class="navBack" @click="returns">
							<uni-icons type="back" size="24"></uni-icons>
						</view>
						<!-- 云仓 -->
						<view class="select-item" :class="tabIndex==0?'active':''" @click="changeType(0)">{{$t("goods.cloudWarehouse")}}</view>
						<!-- 自建 -->
						<view class="select-item" :class="tabIndex==1?'active':''" @click="changeType(1)">{{$t("goods.selfBuilt")}}</view>
					</view>
				</view>
			</view>
			<view>
				<wp-search ref="wpSearch" :placeholder="$t('goods.searchForProductsPlaceholder')" :isShaiXuan="isShaiXuan" @clearInput="clearInput"
					@cancelFocus="cancelFocus">
				</wp-search>
			</view>
			<u-tabs :list="list" :is-scroll="false" active-color="#111111" :current="current" @change="change"></u-tabs>
			<view class="tabsList">
				<view @click="isSelectChange" :class="{'best':tableFrom.isBest}">{{tableFrom.isBest?$t("goods.recommend"):$t("goods.all")}}
					<u-icon name="arrow-down" size="24" :color="tableFrom.isBest?'#af8a40':'#c0c4cc'" v-if="!isSelect"
						style="margin-left: 7rpx"></u-icon>
					<u-icon name="arrow-up" size="24" :color="tableFrom.isBest?'#af8a40':'#c0c4cc'" v-else
						style="margin-left: 7rpx"></u-icon>
				</view>
				<view @tap="set_where"
					v-if="(tableFrom.cateIds.length!=0 || tableFrom.zoneId || tableFrom.premiumType || tableFrom.stockAreas.length != 0 || tableFrom.brandIds.length != 0 || tableFrom.supplierIds.length!=0 || tableFrom.minPrice || tableFrom.maxPrice || tableFrom.minStock ||tableFrom.maxStock || tableFrom.minDiscount || tableFrom.maxDiscount ||tableFrom.seasonCode)"
					style="color:#AF8A40">{{$t("goods.filter")}}
					<u-icon name="arrow-down" size="24" :color="(tableFrom.cateIds.length!=0 || tableFrom.zoneId|| tableFrom.premiumType || tableFrom.stockAreas.length != 0 || tableFrom.brandIds.length != 0 || tableFrom.supplierIds.length!=0 || tableFrom.minPrice || tableFrom.maxPrice || tableFrom.minStock ||tableFrom.maxStock || tableFrom.minDiscount || tableFrom.maxDiscount ||tableFrom.seasonCode)?'#af8a40':'#c0c4cc'"
						style="margin-left: 7rpx"></u-icon>
				</view>
				<view @tap="set_where" v-else>{{$t("goods.filter")}}
					<!-- <view class="caret-wrapper"> -->
						<u-icon name="arrow-down" size="24" color="#c0c4cc"
							style="margin-left: 7rpx"></u-icon>
					<!-- </view> -->
				</view>
				<view @click="editChange">{{isEdit?$t("goods.finish"):$t("goods.bulkOperations")}}</view>
			</view>
			<view class="select" v-if="isSelect" @click="isSelectChange">
				<view class="item" @click="isBestChange(true)">
					<view class="icon">
						<view :class="{'best':tableFrom.isBest}">{{$t("goods.recommend")}}</view>
						<u-icon name="checkmark" color="#af8a40" size="28" v-if="tableFrom.isBest"></u-icon>
					</view>
				</view>
				<view class="item" @click="isBestChange(false)">
					<view class="icon borderLine">
						<view :class="{'best':!tableFrom.isBest}">{{$t("goods.all")}}</view>
						<u-icon name="checkmark" color="#af8a40" size="28" v-if="!tableFrom.isBest"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view>
			<mescroll-item ref="mescrollItem0" :i="0" :tableFrom="tableFrom" :index="tabIndex"
				@editCheckAll="editCheckAll" @change="changeData" :tabs="list" :topHeight="topHeight" :current="current"
				:isEdit="isEdit" :checkStatus='checkStatus'>
			</mescroll-item>
			<mescroll-item ref="mescrollItem1" :i="1" :tableFrom="tableFrom" :index="tabIndex"
				@editCheckAll="editCheckAll" @change="changeData" :tabs="list" :topHeight="topHeight" :current="current"
				:isEdit="isEdit" :checkStatus='checkStatus'>
			</mescroll-item>
		</view>

		<view v-if="isEdit" class="footer" :class="bottomLift!=0?'bottomLift':''"
			:style="{paddingBottom: `${bottomLift}px`}">
			<view>
				<u-checkbox v-model="checkStatus" shape="circle" @change="checkAll">{{$t("goods.selectAll")}}</u-checkbox>
			</view>
			<block v-if="locale!='zh'">
				<view>
					<view class="text" @tap="updateGoods(0)">{{$t("goods.joinTheZone")}}</view>
					<view class="btn" @tap="updateGoods(1)">{{$t("goods.setPrice")}}</view>
				</view>
				<view>
					<view class="text" @tap="bacthUpdate(0)">{{current==0?$t("goods.removeInBulk"):$t("goods.shelvesInBulk")}}</view>
					<view class="btn pushBtn" @tap="bacthUpdate(1)">{{$t("goods.other")}}</view>
				</view>
			</block>
			<block v-else>
				<view class="text" @tap="updateGoods(0)">{{$t("goods.joinTheZone")}}</view>
				<view class="text" @tap="bacthUpdate(0)">{{current==0?$t("goods.removeInBulk"):$t("goods.shelvesInBulk")}}</view>
				<view class="btn" @tap="updateGoods(1)">{{$t("goods.setPrice")}}</view>
				<view class="btn pushBtn" @tap="bacthUpdate(1)">{{$t("goods.other")}}</view>
			</block>
			
		</view>
		<!-- 筛选 -->
		<div @touchmove.prevent @touchmove.stop.prevent="" class="shaixuanMask" @click="isShaiXuanFun"
			:style="{right:isShaiXuan?'-750rpx':'0',top:navH+'rpx'}">
			<filters ref="searchScreen" class="shaixuanCon" :shaixuan1="shaixuan1" :shaixuan2="shaixuan2"
				:activeIndex="tabIndex" @getProductList="getProductList" @quxiao="quxiao"
				:style="{right:isShaiXuan?'-750rpx':'0'}"></filters>
		</div>
		<!-- 裁剪图片 -->
		<l-clipper :src="tempFilePath" @confirm="caijianOk" @cancel="caijianNo" ref="lclipper">
		</l-clipper>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import wpSearch from "@/components/search/search.vue";
	import wpTabs from "@/components/wp-tabs/wp-tabs.vue";
	import MescrollItem from "./store-more-item.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import filters from "@/components/filters/filters.vue";
	import lClipper from "@/components/lime-clipper/index";
	export default {
		mixins: [MescrollMoreMixin], // 多个mescroll-body写在子组件时, 则使用mescroll-more.js补充子组件的页面生命
		computed: {
			...mapGetters(["isLogin"]),
			list(){
				return [{
						name: this.$t("goods.onTheShelf"),  //上架中
						value: "1",
					},
					{
						name: this.$t("goods.inWarehouse"), //仓库中
						value: "2",
					}
				]
			},
			locale() {
				return this.$i18n.locale
			},
		},
		components: {
			wpSearch,
			wpTabs,
			MescrollItem,
			filters,
			lClipper,
		},
		data() {
			return {
				navH: 0,
				tabIndex: 0,
				isEdit: false,
				bottomLift: app.globalData.bottomLift,
				addFilterHeight: 42,
				show: false,
				checkStatus: false,
				isShaiXuan: true,
				isSelect: false,
				tableFrom: {
					page: 1,
					limit: 20,
					keywords: "",
					cateIds: "",
					brandIds: "",
					supplierIds: "",
					isBest: "",
					merUse: "",
					stockAreas: "",
					type: "1",
					minStock: "",
					maxStock: "",
					minPrice: "",
					maxPrice: "",
					targetImage: "",
					premiumType: "",
				},
				current: 0,
				tempFilePath: "",
				show: false,
				canReset:false 
			};
		},
		onLoad(options) {
			if (options.id) {
				this.tabIndex = options.id;
			}
			if (options.word) {
				this.$refs.wpSearch.search = options.word;
				this.tableFrom.keywords = options.word;
			}
			if (options.tusouimg) {
				// #ifdef MP-WEIXIN
				this.bandTusou();
				// #endif
			}
			// #ifdef MP
			this.navH = app.globalData.navHeight;
			// #endif
			// #ifndef MP
			this.navH = 96;
			// #endif
		},
		onShow() {
			this.canReset && this.changeData();
			this.canReset = true
		},
		mounted() {},
		methods: {
			// 后退
			returns: function() {
				var pages = getCurrentPages();
				if (pages.length == 1) {
					uni.switchTab({
						url: "/pages/index/index",
					});
				} else {
					uni.navigateBack();
				}
			},
			change(index) {
				if (this.isEdit) return;
				this.current = index;
				this.isEdit = false;
				this.checkStatus = false;
				this.isSelect = false;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			// 修改数据回调
			changeData() {
				this.isEdit = false;
				this.checkStatus = false;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.lockDownScroll(
					this.isEdit
				);
			},
			editChange() {
				this.isEdit = !this.isEdit;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.lockDownScroll(
					this.isEdit
				);
				if (!this.isEdit) {
					this.$refs[`mescrollItem${this.tabIndex}`].editChange(false);
					this.checkStatus = false;
				}
			},
			cancelFocus(e) {
				if (e.type === "focus") return;
				this.tableFrom.keywords = e.search;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(false);
			},
			clearInput() {
				this.tableFrom.keywords = "";
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(false);
			},
			changeType(index) {
				if (this.isEdit || !this.isShaiXuan) return;
				this.tabIndex = index;
				this.current = 0;
				this.checkStatus = false;
				this.isSelect = false;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.scrollTo(0);
			},
			// 全选
			checkAll() {
				this.$nextTick(function() {
					this.$refs[`mescrollItem${this.tabIndex}`].editChange(this.checkStatus);
				});
			},
			// 筛选关闭
			isShaiXuanFun() {
				this.isShaiXuan = true;
			},
			isSelectChange() {
				this.isSelect = !this.isSelect;
				this.selectTop = 10;
			},
			// 推荐筛选
			isBestChange(type) {
				this.tableFrom.isBest = type;
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
			},
			set_where() {
				this.isShaiXuan = !this.isShaiXuan;
			},
			// 取消全选
			editCheckAll(result) {
				this.checkStatus = result;
			},
			getProductList(shaixuan, shaixuanReq) {
				this.tableFrom.stockAreas = shaixuanReq.stockArea.join(",");
				this.tableFrom.brandIds = shaixuanReq.brandIds.join(",");
				this.tableFrom.cateIds = shaixuanReq.cids.join(",");
				this.tableFrom.supplierIds = shaixuanReq.supplierIds.join(",");
				this.tableFrom.seasonCode = shaixuanReq.seasonCode;
				this.tableFrom.minPrice = shaixuanReq.minPrice;
				this.tableFrom.maxPrice = shaixuanReq.maxPrice;
				this.tableFrom.minDiscount = shaixuanReq.minDiscount;
				this.tableFrom.maxDiscount = shaixuanReq.maxDiscount;
				this.tableFrom.premiumType = shaixuanReq.premiumType+"";
				this.tableFrom.stateType = shaixuanReq.stateType.join(",");
				if (shaixuanReq.zoneId) {
					this.tableFrom.zoneId = shaixuanReq.zoneId;
				} else {
					delete this.tableFrom.zoneId;
				}
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.scrollTo(0);
				this.isShaiXuan = true;
			},
			updateGoods(type) {
				if (type == 0) {
					this.$refs[`mescrollItem${this.tabIndex}`].zhuanquShow();
				} else {
					this.$refs[`mescrollItem${this.tabIndex}`].batchUpdateShow();
				}
			},
			// 筛选取消
			quxiao() {
				(this.tableFrom = {
					page: 1,
					limit: 20,
					cateIds: "",
					brandIds: "",
					supplierIds: "",
					keywords: "",
					isBest: "",
					merUse: "",
					stockAreas: "",
					type: "1",
					minStock: "",
					maxStock: "",
					minPrice: "",
					maxPrice: "",
					isEurope: "",
					zoneId: "",
					seasonCode: "",
				}),
				(this.isShaiXuan = true);
				this.$refs[`mescrollItem${this.tabIndex}`].mescroll.resetUpScroll(true);
				// this.shaixuandata={};
				// this.$set(this.where, 'page', 1);
				// this.get_product_list(true);
			},
			// 批量上下架、推荐
			bacthUpdate(type) {
				this.$refs[`mescrollItem${this.tabIndex}`].bacthUpdate(type);
			},

			//图搜
			bandTusou() {
				var that = this;
				that.show = true;
				that.upload();
			},
			upload() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: (res) => {
						that.tempFilePath = res.tempFilePaths.shift();
					},
					fail() {
						that.show = false;
					},
				});
			},
			// 图片裁剪确定
			caijianOk(eve) {
				var that = this;
				that.url = eve.detail.tempFilePath;
				that.show = false;
				this.$refs[`mescrollItem${this.active}`].tableFrom.targetImage =
					eve.detail.tempFilePath;
				this.$refs[`mescrollItem${this.active}`].mescroll.resetUpScroll(true);
			},
			// 图片裁剪取消
			caijianNo() {
				var that = this;
				that.show = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.navHead {
		position: fixed;
		z-index: 997;
		width: 100%;

		.navbar {
			position: relative;
			background-color: #fff;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbarH {
				position: relative;
				height: 100%;
				width: 100%;

				.navbarCon {
					position: absolute;
					bottom: 0;
					height: 100rpx;
					width: 100%;

					.navBack {
						font-weight: 600;
						position: absolute;
						left: 6rpx;
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.select-item {
						// width: 120rpx;
						text-align: center;
						height: 100rpx;
						line-height: 100rpx;
						font-size: 28rpx;
						color: #616161;
					}
					.select-item ~.select-item{
						margin-left: 50rpx;
					}

					.active {
						font-weight: bold;
						font-size: 34rpx;
						color: #111111;
					}
				}
			}
		}
	}

	.footer {
		padding: 0 20rpx;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		display: flex;
		height: 130rpx;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		font-size: 24rpx;
		.text{
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn {
			padding: 12rpx 30rpx;
			border: 1rpx solid rgb(29, 28, 28);
			border-radius: 10rpx;
			margin-top: 10rpx;
		}

		.btn.pushBtn {
			background: black;
			color: #ffffff;
		}
	}

	.bottomLift {
		height: 200rpx !important;
	}

	.tabsList {
		display: flex;
		top: 200rpx;
		justify-content: space-between;
		padding: 20rpx 60rpx;
		background-color: #ffffff;
		color: #111111;
		border-bottom: 1rpx solid #eeeeee;

		.best {
			color: #af8a40;
		}

		view {
			text-align: center;
			position: relative;
			height: 34px;
			line-height: 34px;
		}

		.caret-wrapper {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			height: 34px;
			width: 24px;
			vertical-align: middle;
			cursor: pointer;
			overflow: initial;
			position: relative;
		}

		.sort-caret {
			width: 0;
			height: 0;
			border: 4px solid transparent;
			position: absolute;
			left: 7px;
		}

		.ascending {
			border-bottom-color: #c0c4cc;
			top: 8px;
		}

		.descending {
			border-top-color: #c0c4cc;
			bottom: 8px;
		}
	}

	.select {
		left: 0;
		bottom: 0;
		right: 0;
		position: relative;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		.item {
			background: #fff;
			width: 100%;
			font-size: 28rpx;

			.icon {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 70rpx;

				.best {
					color: #af8a40;
				}
			}

			.borderLine {
				border-top: 1rpx solid rgb(228, 231, 237);
			}
		}
	}

	.shaixuanMask {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		right: -750rpx;
		z-index: 9999;

		.shaixuanCon {
			position: fixed;
			top: 0;
			right: -750rpx;
			z-index: 9999;
			transition: all 0.4s ease-in-out;
		}

		&::v-deep .productSort {
			width: 670rpx;
			position: absolute;
			top: 0;
			right: 0;
		}

		&::v-deep .bottomNav {
			width: 670rpx;
		}
	}
</style>
